@function pad($radius) {
  $radius: boxmax($radius);
  $radius: parseint($radius);
  @if $radius >= 10 {
    @return $radius;
  } @else {
    @return "0" + $radius;
  }
}

@mixin x-frame(
  $cls,
  $ui: null,
  $border-radius: 0px,
  $border-width: 0px,
  $padding: null,
  $background-color: null,
  $background-gradient: null,
  $table: false,
  $background-direction: top
) {
  $cls-ui: $cls;
  @if $ui != null {
    $cls-ui: $cls + '-' + $ui;
  }

  $vertical: false;
  @if $background-direction == left or $background-direction == right {
    $vertical: true;
  }

  $frame-top: max(top($border-radius), right($border-radius));
  $frame-right: max(right($border-radius), bottom($border-radius));
  $frame-bottom: max(bottom($border-radius), left($border-radius));
  $frame-left: max(left($border-radius), top($border-radius));

  $padding-top: 0;
  $padding-right: 0;
  $padding-bottom: 0;
  $padding-left: 0;

  @if $padding == null {
    $padding-top: $frame-top - top($border-width);
    $padding-right: $frame-right - right($border-width);
    $padding-bottom: $frame-bottom - bottom($border-width);
    $padding-left: $frame-left - left($border-width);
  } @else {
    $padding-top: top($padding);
    $padding-right: right($padding);
    $padding-bottom: bottom($padding);
    $padding-left: left($padding);
  }

  @if $padding-top < $frame-top {
    $padding-top: $frame-top - top($border-width);
  }
  @if $padding-right < $frame-right {
    $padding-right: $frame-right - right($border-width);
  }
  @if $padding-bottom < $frame-bottom {
    $padding-bottom: $frame-bottom - bottom($border-width);
  }
  @if $padding-left < $frame-left {
    $padding-left: $frame-left - left($border-width);
  }

  .#{$prefix}#{$cls-ui} {
    @if $supports-border-radius {
      @if length($border-radius) == 2 {
        @include border-top-left-radius(nth($border-radius, 1));
        @include border-top-right-radius(nth($border-radius, 2));
      } @else if length($border-radius) == 3 {
        @include border-top-left-radius(nth($border-radius, 1));
        @include border-top-right-radius(nth($border-radius, 2));
        @include border-bottom-right-radius(nth($border-radius, 3));
      } @else if length($border-radius) == 4 {
        @include border-top-left-radius(nth($border-radius, 1));
        @include border-top-right-radius(nth($border-radius, 2));
        @include border-bottom-right-radius(nth($border-radius, 3));
        @include border-bottom-left-radius(nth($border-radius, 4));
      } @else {
        @include border-radius($border-radius);
      }
    }
    padding: $padding-top $padding-right $padding-bottom $padding-left;
    border-width: $border-width;
    border-style: solid;
    @if $background-color != null {
      @if $supports-gradients and $background-gradient != null {
        @include background-gradient($background-color, $background-gradient, $background-direction);
      } @else {
        background-color: $background-color;
      }
    }
  }

  @if not $supports-gradients or $compile-all {
    .#{$prefix}nlg {
      .#{$prefix}#{$cls-ui}-mc {
        @if $background-gradient != null {
          background-image: theme-background-image($theme-name, '#{$cls}/#{$cls-ui}-bg.gif', false, $relative-image-path-for-uis);
        }
        @if $background-color != null {
          background-color: $background-color;
        }
      }
    }
  }

  @if not $supports-border-radius or $compile-all {
    .#{$prefix}nbr {
      .#{$prefix}#{$cls-ui} {
        padding: 0 !important;
        border-width: 0 !important;
        @include border-radius(0px);
        @if $background-color != null {
          background-color: transparent;
        } @else {
          background: #fff;
        }

        $type: '100';
        @if $table == true {
          $type: '110';
        }
        $direction: '100';
        @if $vertical == true {
          $direction: '110';
        }

        $left: $type + pad(top($border-radius)) + pad(right($border-radius)) + 'px';
        $top: $direction + pad(bottom($border-radius)) + pad(left($border-radius)) + 'px';
        background-position: unquote($left) unquote($top);
      }

      .#{$prefix}#{$cls-ui}-tl,
      .#{$prefix}#{$cls-ui}-bl,
      .#{$prefix}#{$cls-ui}-tr,
      .#{$prefix}#{$cls-ui}-br,
      .#{$prefix}#{$cls-ui}-tc,
      .#{$prefix}#{$cls-ui}-bc,
      .#{$prefix}#{$cls-ui}-ml,
      .#{$prefix}#{$cls-ui}-mr {
        zoom: 1;

        @if $background-color != transparent {
          background-image: theme-background-image($theme-name, '#{$cls}/#{$cls-ui}-corners.gif', false, $relative-image-path-for-uis);
        }
      }

      @if $vertical == true {
        .#{$prefix}#{$cls-ui}-tc,
        .#{$prefix}#{$cls-ui}-bc {
          zoom: 1;

          @if $background-color != transparent {
            background-image: theme-background-image($theme-name, '#{$cls}/#{$cls-ui}-sides.gif', false, $relative-image-path-for-uis);
            background-position: 0 0;
            background-repeat: repeat-x;
          }
        }
      } @else {
        .#{$prefix}#{$cls-ui}-ml,
        .#{$prefix}#{$cls-ui}-mr {
          zoom: 1;

          @if $background-color != transparent {
            background-image: theme-background-image($theme-name, '#{$cls}/#{$cls-ui}-sides.gif', false, $relative-image-path-for-uis);
            background-position: 0 0;
            @if $background-gradient == null {
              background-repeat: repeat-y;
            }
          }
        }
      }

      $padding-top: $padding-top - $frame-top + top($border-width);
      $padding-right: $padding-right - $frame-right + right($border-width);
      $padding-bottom: $padding-bottom - $frame-bottom + bottom($border-width);
      $padding-left: $padding-left - $frame-left + left($border-width);


      @if $padding-top < 0 {
        $padding-top: 0;
      }
      @if $padding-right < 0 {
        $padding-right: 0;
      }
      @if $padding-bottom < 0 {
        $padding-bottom: 0;
      }
      @if $padding-left < 0 {
        $padding-left: 0;
      }

      .#{$prefix}#{$cls-ui}-mc {
        padding: $padding-top $padding-right $padding-bottom $padding-left;
      }
    }

    @if $include-ie {
      // framed components in ie7 strict mode suffer from an obscure bug that causes the tl and bl framing elements to
      // be shrink-wrapped to the width of their contents.  This hack forces the elements' widths to fit to their parent
      .#{$prefix}strict .#{$prefix}ie7 {
        .#{$prefix}#{$cls-ui}-tl,
        .#{$prefix}#{$cls-ui}-bl {
          position: relative;
          right: 0;
        }
      }
    }
  }
}
